<template>
    <div id="DormitoryMange"   :style="{ 'transition': isCollapse ? '.6s all' : '.35s all', 'width': isCollapse ? myWidth1 : myWidth2, 'height': myHeight }">
       
        <div class="sidebar">
            <div style="    height: 40px;line-height: 40px;border-bottom: 1px solid #e0e0e0;">分类列表</div>
            <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
        <ul class="main">
            <li class="item" v-for="(item,index) in dormitory" :key="(item, index)">
                <div class="myicon">
                    <svg t="1668523208998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2170"
                        width="40" height="40">
                        <path
                            d="M800 992H0V416a96 96 0 0 1 96-96h128V128a96 96 0 0 1 96-96h384a96 96 0 0 1 96 96v416h128a96 96 0 0 1 96 96v352h-224zM224 384H96a32 32 0 0 0-32 32v512h160V384z m512 160V128a32 32 0 0 0-32-32H320a32 32 0 0 0-32 32v800h192v-96h-96v-64h256v64h-96v96h192V544z m224 96a32 32 0 0 0-32-32h-128v320h160v-288z m-64 96h-64v-64h64v64z m0 128h-64v-64h64v64z m-352-288h64v64h-64v-64z m0-128h64v64h-64v-64z m0-128h64v64h-64v-64z m0-128h64v64h-64V192z m-128 384h64v64h-64v-64z m0-128h64v64h-64v-64z m0-128h64v64h-64v-64z m0-128h64v64h-64V192zM192 544H128v-64h64v64z m0 128H128v-64h64v64z m0 128H128v-64h64v64z"
                            p-id="2171" fill="#8a8a8a"></path>
                    </svg>
                </div>
                <div class="detail">
                    <span>楼栋号：{{ item.buildingEntity.bid }}</span><br>
                    <span>宿舍号：{{item.number}}</span><br>
                    <span>总人数：{{ item.capacity }}</span><br>
                    <span>性质：男</span>
                </div>
                <div class="num">
                    <div class="left">已选：{{ item.personNumber }}</div>
                    <div class="right">
                        <el-progress :percentage="forInt(item.personNumber * 100 / item.capacity)"></el-progress>
                    </div>
                </div>
                <div>
                    <el-button class="btn" type="primary" size="mini" @click="forchoose(item, index)"  :disabled="index == ischosen.num ? !ischosen.choose : ischosen.choose">选择</el-button>
                </div>
                <div class="top" v-if="index==ischosen.num">
                    已选择
                </div>
            </li>
        </ul>
        
        <el-dialog style="text-align=left" title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <span>当前宿舍学生已满</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import axios from 'axios';

export default {
    data(){
        return{
            oldDor:{},
            dialogVisible: false,
            height: "",
            ischosen:{
                num:-1,
                choose:false
            },
            myHeight:"",
            myWidth1: "",//未展开的宽度
            myWidth2: "",//展开了的宽度
            treeData:[{
                label:"性别",
                children:[{
                    label: "男",
                },{
                    label: "女",
                }]
            }, {
                label: "楼栋号",
                children: [{
                    label: "1",
                },{
                    label: "2",
                }, {
                    label: "3",
                }, {
                    label: "4",
                }, {
                    label: "5",
                }]
                }],
            defaultProps: {//树形控件的配置
                children: 'children',
                label: 'label'
            },
        }
    },
    props: {
        isCollapse: true,
        dormitory: [],
        studentdetail: {},
    },
    methods:{
        init() {//初始化选取宿舍信息
            // console.log(this.dormitory);
            this.ischosen.choose = false;
            this.ischosen.num = -1;
            for(var i=0;i<this.dormitory.length;i++){
                document.querySelectorAll(".btn")[i].innerHTML = "选择";
            }
            if (this.studentdetail.dormitoryGetTDO != "") {
                
                this.dormitory.forEach((item, index) => {
                    if (item.did == this.studentdetail.dormitoryGetTDO.did && item.buildingEntity.bid == this.studentdetail.dormitoryGetTDO.buildingEntity.bid) {
                        // console.log("选取了");
                        // console.log(item.did+"  "+item.buildingEntity.bid+"   "+index);
                        this.ischosen.choose = true;
                        this.ischosen.num=index;
                        this.$nextTick(()=>{
                            document.querySelectorAll(".btn")[index].innerHTML = "取消";
                        })
                        return;
                        
                    }
                })
                
            }
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        forInt(num){
            return parseInt(num);
        },
        handleNodeClick(data) {//树形空间点击时触发
            if(data.children==null){
                var serach="";
                var _this=this;
                if(data.label!='男'&&data.label!='女'){
                    serach=data.label;

                    axios({
                        method: "get",
                        url: "api/dormitories/getBuilding/" + serach
                    }).then(function (resp) {
                        _this.$emit('updateDormitory', resp.data.data.dormitoryEntities);
                        _this.$nextTick(() => {
                            _this.init();
                        })
                    })

                }else{
                    serach = data.label == '男' ? 1:0;
                    
                    axios({
                        method: "get",
                        url: "api/dormitories/getByGender/" + serach
                    }).then(function (resp) {
                        var dor=[];
                        var len = resp.data.data.data.length;
                        var suc=0;
                        resp.data.data.data.forEach((item,index)=>{
                            axios({
                                method: "get",
                                url: "api/dormitories/getBuilding/" + item.bid
                            }).then(function (resp) {
                                dor.push(...resp.data.data.dormitoryEntities);
                                suc++;
                                if(suc==len){
                                    _this.$emit('updateDormitory', dor);
                                    _this.$nextTick(()=>{
                                        _this.init();
                                    })
                                    
                                } 
                            })
                        })
                    })
                }
            }
            
        },
        forchoose(item, index){
            console.log(item);
            if(this.studentdetail.gender!=item.buildingEntity.gender){
               
                this.$message({
                    message: '请选择正确宿舍',
                    type: 'warning'
                });
                
                return;
            }
            if (item.personNumber == item.capacity && document.querySelectorAll(".btn")[index].innerHTML == "选择"){
                this.dialogVisible = true;
            }else{
                if (this.ischosen.choose == true) {
                    //已经选择取消选择
                    this.ischosen.num = -1;
                    item.personNumber--;
                    document.querySelectorAll(".btn")[index].innerHTML = "选择";

                    this.oldDor=item;
                    console.log(this.oldDor);
                   

                } else {
                    //未选择进行选择
                    this.ischosen.num = index;
                    item.personNumber++;
                    document.querySelectorAll(".btn")[index].innerHTML = "取消";
                    var _this=this;
                    axios({
                        method: "put",
                        url: "api/dormitories/selectDormitory/" + item.did+"/"+_this.studentdetail.iid
                    }).then(function (resp) {
                        _this.$message({
                            message: '选取成功',
                            type: 'success'
                        });
                        _this.$emit("updateInfo");

                        if(_this.oldDor!=""){
                            axios({
                                method: "put",
                                url: "api/dormitories/updateDormitory",
                                data: {
                                    "did": _this.oldDor.did,
                                    "bid": _this.oldDor.buildingEntity.bid,
                                    "capacity": _this.oldDor.capacity,
                                    "personNum": _this.oldDor.personNumber
                                }
                            }).then(function (resp) {

                            })
                        }
                        

                        axios({
                            method: "put",
                            url: "api/dormitories/updateDormitory",
                            data:{
                                "did": item.did,
                                "bid": item.buildingEntity.bid,
                                "capacity": item.capacity,
                                "personNum": item.personNumber
                            }
                        }).then(function (resp) {
                            
                        })
                            
                        

                    })
                }
                this.ischosen.choose = !this.ischosen.choose;
                
            }
            // console.log(this.ischosen);
        }
    },
    created(){
        this.myHeight = window.innerHeight - 40 - 40 - 20- 35 + "px";
        this.myWidth1 = window.innerWidth - 64 - 45 + "px";
        this.myWidth2 = window.innerWidth - 200 - 45 + "px";
    },
    mounted(){
        this.init();
    },
    watch:{
        dormitory(){
            this.$nextTick(()=>{
                this.init();
            })
            
        }
    }
}
</script>

<style scoped>
#DormitoryMange{
    float: left;
    height: 500px;
}
#DormitoryMange .main{
    overflow: auto;
    height: 96%;
    padding: 0px;
    width: 77%;
    padding-top: 4px;
    padding-right: 4px;
}
#DormitoryMange .main .item{
    position: relative;
    float: left;
    list-style: none;
    width: 23.4%;
    height: 29%;
    background-color: #ffffff;
    margin-left: 1.6%;
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
}
#DormitoryMange .main .item:hover{
    box-shadow: 0 0px 7px rgb(0 0 0 / 16%), 0 0 6px rgb(0 0 0 / 8%);
}
#DormitoryMange .main .item .myicon{
    float: left;
        width: 50px;
        height: 50px;
        margin-top: 18px;
        margin-left: 15px;
        margin-right: 15px;
        margin-bottom: 11px;
}
#DormitoryMange .main .item .detail{
    text-align: left;
    margin-top: 12px;
    height: 40%;
}
#DormitoryMange .main .item .num{
    height: 26%;
        width: 100%;
        line-height: 50px;
        margin-top: 9px;
}
#DormitoryMange .main .item  .num .left{
    height: 100%;
    width: 26%;
    font-size: 10px;
    float: left;
}
#DormitoryMange .main .item .num .right{
    height: 34;
    width: 73%;
    padding-top: 16px;
    float: right;
}
#DormitoryMange .main .item .detail>span{
    color: #909399;
}
#DormitoryMange .main .item .top{
    position: absolute;
    top: -7px;
    right: -33px;
    width: 100px;
    height: 50px;
    background-color: #f56c6c;
    color: #ffffff;
    transform: rotate(45deg);
    line-height: 77px;
    text-indent: 23px;
}
#DormitoryMange .sidebar{
    height: 97%;
    width: 20%;
    float: left;
    background-color: #ffffff;
    margin-right: 20px;
    margin-top: 16px;
}
</style>